<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo12-slot02-插槽prop解构</title>
</head>
<script src="../libs/vue.js"></script>
<style>
    .container{
        width: 100%;
        min-width: 320px;
        max-width: 640px;

        margin:0 auto;
    }
</style>
<body>
    <div id="app"> 

      <!-- 
        To avoid scope ambiguity, the default slot should also use <template> syntax when there are other named slots. 

          这一节讲的就是解构。看起来像新语法， 但不是新特性。
          v-slot 等价于 v-slot:default ，就是文章中说的【独占默认插槽的缩写语法】
      -->
      <current-user v-slot="{ p }">
        root user : {{ p }} 
      </current-user>
      
    </div>
</body>

<script>

Vue.component('current-user',{
  data:function(){
    return {
      user:{
        id:1,
        name:'hh01',
        age:18,
        remark:'来自child的user信息'
      }
    }
  },
  template:`<div>
    <slot :p="user">子组件默认占位 default slot</slot><hr><br>
    <slot v-bind:user="user" name="slot01">子组件默认占位：current-user当前用户：{{user.name}}</slot><hr><br>
    <slot v-bind:remark="user.remark" name="user-remark">子组件默认占位：current-user用户描述：{{user.remark}}</slot><hr><br>
    </div>`
})

var app = new Vue({
  el: '#app',
  data:{
    rootUser:{
      id:0,
        name:'root01',
        age:100,
        remark:'root user信息  描述。。。。。。。。'
    }
  }
});
</script>
</html>